<template>
    <div class="shopcar_container">

        <div class="goods_list">
            <div class="mui-card" v-for="item in goodsList" :key="item.id">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<mt-switch></mt-switch>
                        <img class="thumb" :src="item.img_url">
                        <div class="info">
                            <h1>{{ item.title }}</h1>
                            <p>
                                <span class="price">￥{{ item.sell_price }}</span>
                                <Numbox></Numbox>
                                <a href="">删除</a>
                            </p>
                        </div>
					</div>
				</div>
			</div>
        </div>

        <!-- 结算区域 -->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    这是一个最简单的卡片视图控件；卡片视图常用来显示完整独立的一段信息，比如一篇文章的预览图、作者信息、点赞数量等
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import Numbox from "../subcomponents/shopcar_numbox.vue";
export default {
  data() {
    return {
        goodsList: [],  // 购物车中所有商品的数据
    };
  },
  methods: {
    getGoodsList() {
      // 1、获取到 store 中所有的商品的 id ，然后拼接处一个用逗号分隔的字符串
      var idAll = [];
      this.$store.state.car.forEach(item => idAll.push(item.id));
      // 如果是真实的接口，需要用 join 方法把 idAll 解析成字符串
      // console.log(idAll.join(','))

      // 如果购物车中没有商品，则直接返回，不需要请求数据接口，否则会报错
      if (idAll.length <= 0) {
        return;
      }

      // 获取购物车商品列表
      this.$http
        .jsonp(
          '?s=App.Table.FreeQuery&model_name=goodslist&where=[["id", ">", 0],["id", "<=", ' +
            idAll.length +
            "]]&app_key=4F07D528AB07EE72BD7F7C9263BD6705"
        )
        .then(result => {
          if (result.body.ret === 200) {
            console.log(result.body);
            this.goodsList = result.body.data.list
          }
        });
    }
  },
  components: {
    Numbox
  },
  created() {
    this.getGoodsList();
  }
};
</script>

<style lang="less" scoped>
.shopcar_container {
  background-color: #fff;
  padding: 1px 0;
  .mui-card-content-inner {
    display: flex;
    align-items: center;
  }
  .goods_list {
    .thumb {
      width: 60px;
      height: 60px;
    }
    .info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      h1 {
        font-size: 13px;
      }
      p {
        margin: 0;
      }
      .mui-numbox {
        height: 25px;
      }
      .price {
        color: red;
        font-weight: bold;
      }
    }
  }
}
</style>
